:root {
  --screenHeight: 100vh;

  --dialogueBoxHeight: 30vh;

  --screenWidth: 100vw;

  --headBarHeight: 91px;

  --rightBar-width: 288px;

  --leftBar-width: 288px;

  --font-1: "Big Shoulders Display", sans-serif;

  --font-2: "Iceland", sans-serif;

  --font-3: "Nunito Sans", sans-serif;

  --primary-clr: #e84a4a;

  /* --primary-clr: #e84a4a; */

  --primary-clr-2: #ff6b69;

  --primary-bright: #ff6b6b;

  --secondary-clr: #2c0f14;

  --dark-clr: #3b1214;

  --darker-clr: #1a0809;

  --primary-dark-2: #3b1214;

  --content-clr: #290707;

  --shade: #2c0f14;

  --bg-clr: #000003;

  --z-index-1: 100000000001;
  --z-index-2: 10000000000;
  --z-index-3: 10000000;
  --z-index-4: 100000;
  --z-index-5: 10000;
  --z-index-6: 1000;

  --red-gradient: linear-gradient(
    90deg,
    rgba(231.68, 73.63, 73.63, 0) 0%,
    rgba(231.68, 73.63, 73.63, 0.17) 52%,
    rgba(231.68, 73.63, 73.63, 0) 100%
  );
}

:root {
  --font-1: "Big Shoulders Display", sans-serif;

  --font-2: "Iceland", sans-serif;

  --font-3: "Nunito Sans", sans-serif;

  /* monospace
    */
  --font-mono: Consolas, "Andale Mono", Courier, "Courier New", monospace;
}

/* ------------------------------------------------------------------- 
 * ## colors
 * ------------------------------------------------------------------- */
:root {
  /* Old
    --scrollbar-track-color: #1E1E1E;
    --scrollbar-base-color: #1E1E1E;
    --scrollbar-thumb-color: rgba(58, 61, 65, 0.75);
    --scrollbar-thumb-hover: #505354;
    --scrollbar-annotation-color: #898989;
    --scrollbar-opacity: 1; */

  /* New 

    --scrollbar-track-color: #79797933;
    --scrollbar-base-color: #79797933;
    --scrollbar-thumb-color: #bfbfbf66;
    --scrollbar-thumb-hover: #646464b3;
    --scrollbar-annotation-color: #fcff5b;
    --scrollbar-opacity: 1; */

  --scrollbar-track-color: #1e1e1e;
  --scrollbar-base-color: #1e1e1e;
  --scrollbar-thumb-color: #bfbfbf66;
  --scrollbar-thumb-hover: #505354;
  --scrollbar-annotation-color: #898989;
  --scrollbar-opacity: 1;

  --color-1: #ffdd2a; /* Main Yellow */
  --color-2: #00ffc2; /* Main Cyan */

  /* Shades of color-1 (Yellow to Orange) */
  --color-1-lighter: #fff5b3; /* Light Yellow */
  --color-1-light: #ffe066; /* Medium Yellow */
  --color-1-dark: #ffb600; /* Dark Yellow/Orange */
  --color-1-darker: #ff8c00; /* Darker Orange */

  /* Shades of color-2 (Cyan to Blue) */
  --color-2-lighter: #b3ffeb; /* Light Cyan */
  --color-2-light: #66ffd7; /* Medium Cyan */
  --color-2-dark: #00bfff; /* Darker Cyan/Blue */
  --color-2-darker: #0073e6; /* Dark Blue */

  /* feedback colors
     * color-error(#ffd1d2), color-success(#c8e675), 
     * color-info(#d7ecfb), color-notice(#fff099)
     */
  --color-error: hsla(359, 100%, 91%, 1);
  --color-success: hsla(76, 69%, 68%, 1);
  --color-info: hsla(205, 82%, 91%, 1);
  --color-notice: hsla(51, 100%, 80%, 1);
  --color-error-content: hsla(359, 50%, 50%, 1);
  --color-success-content: hsla(76, 29%, 28%, 1);
  --color-info-content: hsla(205, 32%, 31%, 1);
  --color-notice-content: hsla(51, 30%, 30%, 1);

  /* shades 
     * generated using 
     * Tint & Shade Generator 
     * (https://maketintsandshades.com/)
     */
  --color-black: #060606;
  --color-gray-19: #161616;
  --color-gray-18: #2c2c2c;
  --color-gray-17: #424342;
  --color-gray-16: #585958;
  --color-gray-15: #6e6f6f;
  --color-gray-14: #898989;
  --color-gray-13: #999b9b;
  --color-gray-12: #afb2b1;
  --color-gray-11: #c5c8c7;
  --color-gray-10: #dbdedd;
  --color-gray-9: #e0e0e0;
  --color-gray-8: #e2e5e4;
  --color-gray-7: #e6e8e7;
  --color-gray-6: #e9ebeb;
  --color-gray-5: #edefee;
  --color-gray-4: #f1f2f1;
  --color-gray-3: #f4f5f5;
  --color-gray-2: #f8f8f8;
  --color-gray-1: #fbfcfc;
  --color-white: #ffffff;

  /* text
     */
  --color-text: var(--color-gray-9);
  --color-text-dark: var(--color-black);
  --color-text-light: var(--color-gray-9);
  --color-placeholder: var(--color-gray-9);

  /* buttons
     */
  --color-btn: var(--color-gray-9);
  --color-btn-text: var(--color-black);
  --color-btn-hover: var(--color-gray-11);
  --color-btn-hover-text: var(--color-black);
  --color-btn-primary: var(--color-1);
  --color-btn-primary-text: var(--color-black);
  --color-btn-primary-hover: var(--color-1-dark);
  --color-btn-primary-hover-text: var(--color-black);
  --color-btn-stroke: var(--color-black);
  --color-btn-stroke-text: var(--color-black);
  --color-btn-stroke-hover: var(--color-black);
  --color-btn-stroke-hover-text: var(--color-white);

  /* preloader
     */
  --color-preloader-bg: var(--color-gray-19);
  --color-loader: var(--color-2);
  --color-loader-light: rgba(255, 255, 255, 0.1);

  /* others
     */
  --color-body: var(--color-black);
  --color-border: rgba(0, 0, 0, 0.08);
  --border-radius: 3px;
}

/* ------------------------------------------------------------------- 
 * ## spacing and typescale
 * ------------------------------------------------------------------- */
:root {
  /* spacing
     * base font size: 18px 
     * vertical space unit : 32px
     */
  --base-size: 16px;
  /* --base-size        : 62.5%; */
  --multiplier: 1;
  --base-font-size: calc(1.8rem * var(--multiplier));
  --space: calc(3.2rem * var(--multiplier));

  /* vertical spacing 
     */
  --vspace-0_125: calc(0.125 * var(--space));
  --vspace-0_25: calc(0.25 * var(--space));
  --vspace-0_375: calc(0.375 * var(--space));
  --vspace-0_5: calc(0.5 * var(--space));
  --vspace-0_625: calc(0.625 * var(--space));
  --vspace-0_75: calc(0.75 * var(--space));
  --vspace-0_875: calc(0.875 * var(--space));
  --vspace-1: calc(var(--space));
  --vspace-1_25: calc(1.25 * var(--space));
  --vspace-1_5: calc(1.5 * var(--space));
  --vspace-1_75: calc(1.75 * var(--space));
  --vspace-2: calc(2 * var(--space));
  --vspace-2_5: calc(2.5 * var(--space));
  --vspace-3: calc(3 * var(--space));
  --vspace-3_5: calc(3.5 * var(--space));
  --vspace-4: calc(4 * var(--space));
  --vspace-4_5: calc(4.5 * var(--space));
  --vspace-5: calc(5 * var(--space));
  --vspace-5_5: calc(5.5 * var(--space));
  --vspace-6: calc(6 * var(--space));

  /* type scale
     * ratio 1         :2 | base: 18px
     * -------------------------------------------------------
     *
     * --text-display-3 = (77.40px)
     * --text-display-2 = (64.50px)
     * --text-display-1 = (53.75px)
     * --text-xxxl      = (44.79px)
     * --text-xxl       = (37.32px)
     * --text-xl        = (31.10px)
     * --text-lg        = (25.92px)
     * --text-md        = (21.60px)
     * --text-size      = (18.00px) BASE
     * --text-sm        = (15.00px)
     * --text-xs        = (12.50px)
     *
     * ---------------------------------------------------------
     */
  --text-scale-ratio: 1.2;
  --text-size: var(--base-font-size);
  --text-xs: calc(
    (var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio)
  );
  --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
  --text-md: calc(
    var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio)
  );
  --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
  --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
  --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
  --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
  --text-display-1: calc(var(--text-xxxl) * var(--text-scale-ratio));
  --text-display-2: calc(var(--text-display-1) * var(--text-scale-ratio));
  --text-display-3: calc(var(--text-display-2) * var(--text-scale-ratio));

  /* default button height
     */
  --vspace-btn: var(--vspace-2);
}